<template>
  <div class="container">
    <div class="text">用户名:{{ userInfo.name }}</div>
    <div class="text">用户角色:{{ userInfo.roles }}</div>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
  data(){
    return{
      userInfo:{},
      num : 5,
      timer:'',
    }
  },
  methods:{
      //获取用户信息
      getUserInfo(){
        let info = Cookies.get("guli_user");
        if(info){
          this.userInfo = JSON.parse(info);
          console.log("userInfo (Home) == ",this.userInfo)
          return true;
        }else{
          return false;
        }
        
      },

      get(){
        this.timer = setInterval(()=>{
          //定时执行五次
          if(this.num>0){
            //每次自减一
            this.num--;
            //如果获取成功，则停止循环
            if(this.getUserInfo()){
              console.log("userInfo (Home) == 数据已获取")
              clearInterval(this.timer);
            }
          }else{
            console.log("userInfo (Home) == 数据没有获取到")
            clearInterval(this.timer);
          }
        },500)
      }
  },
  created(){
    this.get();
  }
}
</script>

<style scoped>

  .text{
    font-weight: bold;
    font-size: 32px;

  }
  .container{
    text-align: left;
    margin-top: 50px;
    margin-left: 50px;
  }

</style>